var form = layui.form;

function getlinks() {
  $.ajax({
    type: "GET",
    url: "/admin/links",

    success: function (res) {
      // console.log(res.data);
      let str = "";
      res.data.forEach((item) => {
        str += `
                <tr>
                    <td>${item.id}</td>
                    <td>
                        <div class="bg">
                             <img src="http://localhost:8888/uploads/${item.linkicon}" />
                        </div>
                    </td>
                    <td>${item.linkname}</td>
                    <td>${item.linkurl}</td>
                    <td>${item.linkdesc}</td>
                    <td>
                    <button
                      data-id="${item.id}"
                      type="button"
                      class="layui-btn layui-btn-xs edit"
                    >
                      编辑
                    </button>
                    <button
                      data-id="${item.id}"
                      type="button"
                      class="layui-btn layui-btn-xs layui-btn-danger delete"
                    >
                      删除
                    </button>
                  </td>
                 </tr>
                `;
      });
      $("tbody").html(str);
    },
  });
}
getlinks();

// // 添加友情链接
let addIndex;
$("#add-link").on("click", function (e) {
  addIndex = layer.open({
    type: 1,
    title: "添加友情链接",
    content: $("#add-form-tpl").html(),
    area: ["500px", "350px"],
  });

  $("#urlIcon").on("click", function () {
    $("#linkFile").click();
  });

  $("#linkFile").change(function (e) {
    const objectURL = URL.createObjectURL(e.target.files[0]);
    $("#preIcon").attr("src", objectURL);
  });
  $("#add-form").submit(function (e) {
    e.preventDefault();
    var fd = new FormData(this);
    $.ajax({
      type: "post",
      url: "/admin/links",
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status === 0) {
          // 关闭窗口
          layer.close(addIndex);
          // 刷新列表
          getlinks();
        }
      },
    });
  });
});

// 删除友情链接
$("tbody").on("click", 'button:contains("删除")', function (e) {
  let id = $(this).data("id");
  // console.log(id);
  $.ajax({
    type: "DELETE",
    url: "/admin/links/" + id,

    success: function (res) {
      if (status === 0) {
        // 缺少提示
        layui.msg(res.message);
      }
      getlinks();
    },
  });
});

// 编辑友情链接
$(".layui-table tbody").on("click", ".edit", function (e) {
  var id = $(e.target).data("id");
  // 获取链接数据
  $.ajax({
    type: "get",
    url: "/admin/links/" + id,
    success: function (res) {
      var index = layer.open({
        type: 1,
        title: "编辑友情链接",
        content: $("#edit-form-tpl").html(),
        area: ["500px", "350px"],
      });
      // 设置预览图片效果
      $("#preIcon").attr(
        "src",
        "http://localhost:8888/uploads/" + res.data.linkicon
      );
      // 初始化表单数据
      delete res.data.linkicon;
      form.val("editForm", res.data);

      // 绑定文件上传按钮点击事件
      $("#urlIcon").click(function () {
        $("#linkFile").click();
      });
      // 监听文件选中事件
      let file = null;
      $("#linkFile").change(function (e) {
        const objectURL = URL.createObjectURL(e.target.files[0]);
        file = e.target.files[0];
        $("#preIcon").attr("src", objectURL);
      });

      // 绑定表单提交事件
      $("#edit-form").submit(function (e) {
        e.preventDefault();
        var fd = new FormData(this);
        if (file) {
          fd.append("linkicon", file);
        }
        $.ajax({
          type: "put",
          url: "/admin/links/" + id,
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            if (res.status === 0) {
              // 编辑成功
              layer.close(index);
              getlinks();
            }
          },
        });
      });
    },
  });
});
